import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
import { defineComponent, PropType } from 'vue';
import { IDEDRTab } from '@ibiz/model-core';
import { useRouter } from 'vue-router';
import { DRTabController } from './drtab.controller';

export const DRTabControl = defineComponent({
  name: 'IBizDrTabControl',
  props: {
    modelData: { type: Object as PropType<IDEDRTab>, required: true },
    context: { type: Object as PropType<IContext>, required: true },
    params: { type: Object as PropType<IParams>, default: () => ({}) },
  },
  setup() {
    const c = useControlController((...args) => new DRTabController(...args));
    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
    const router = useRouter();

    c.setRouter(router);

    const handleTabChange = (): void => {
      c.handleTabChange();
    };

    return {
      c,
      ns,
      handleTabChange,
    };
  },
  render() {
    const { isCreated, drTabPages } = this.c.state;
    return (
      <iBizControlBase controller={this.c} class={this.ns.b()}>
        {isCreated && (
          <el-tabs
            v-model={this.c.state.activeName}
            onTabChange={this.handleTabChange}
          >
            {drTabPages.map(tab => {
              return (
                <el-tab-pane
                  class={this.ns.e('tab-item')}
                  label={tab.caption}
                  disabled={tab.disabled}
                  name={tab.tag}
                ></el-tab-pane>
              );
            })}
          </el-tabs>
        )}
      </iBizControlBase>
    );
  },
});
